<template>
  <div>
    <div class="layui-container">
      <div class="layui-row">
        <div class="layui-col-lg10 layui-col-lg-offset1">
          <div class="block">
            <el-carousel height="300px">
              <el-carousel-item v-for="(item,index) in hotMovieInfo" :key="index" v-if="allMovieInfo.length!=0">
                <h3 class="small"><img :src="getImages(item.movieInfo.images.large)" alt=""
                                       style="width:100%;height: 300px"></h3>
              </el-carousel-item>
              <el-carousel-item v-if="allMovieInfo.length==0">
                <h3 class="small"><img src="static/images/暂无热映.jpg" alt="" style="width:100%;height: 300px"></h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-fluid" style="margin-top: 50px;padding: 0px">
      <div class="layui-row">
        <div class="layui-col-lg6 layui-col-lg-offset1" style="height: 500px;overflow: auto">
          <h1 style="color:#FF7256">{{currentCity}}校区 ( {{currentCityMovieSum}}部 )
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="cursor: pointer" @click="goToAllMoviePage">全部</span></h1>
          <div v-if="currentCityMovieInfo.length!=0">
            <viewer>
              <el-card :body-style="{ padding: '0px' }" v-for="(item,index) in currentCityMovieInfo" :key="index"
                       style="width: 22%;height:300px;float: left;margin: 10px">
                <img :src="getImages(item.movieInfo.images.large)" class="image">
                <div style="padding: 14px;">
                  <span>{{item.movieInfo.original_title}}</span>
                  <div class="bottom clearfix">
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger"
                            style="position: relative;left:80%;bottom: 20px" @click="checkMovieDetails(item.movieInfo)">
                      详情
                    </button>
                  </div>
                </div>
              </el-card>
            </viewer>
          </div>
          <div v-else-if="currentCityMovieInfo.length==0">
            <el-card :body-style="{ padding: '0px' }" style="width: 24%;height:300px;float: left">
              <img src="static/images/暂无热映.jpg" class="image">
              <div style="padding: 14px;text-align: center">
                <span>暂无放映</span>
                <div class="bottom clearfix">
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <div class="layui-col-lg5" style="border: 1px red solid;">
          <button @click="test">测试</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "home_page",
        data() {
            return {
                hotMovieInfo: [],
                currentCity: "",
                currentCityMovieInfo: [],
                allMovieInfo: []
            }
        },
        methods: {
            test() {
                console.log(this.allMovieInfo)
            },
            getImages(_url) {
                if (_url !== undefined) {
                    let _u = _url.substring(7);
                    return 'https://images.weserv.nl/?url=' + _u;
                }
            },
            getCurrentCityMovieInfo() {
                this.currentCityMovieInfo = []
                this.currentCity = sessionStorage.getItem("currentCity")
                this.$nextTick(() => {
                    for (let i = 0; i < this.allMovieInfo.length; i++) {
                        if ((this.allMovieInfo[i].schoolInfo.movie_theatre_address.indexOf(this.currentCity)) != -1) {
                            this.currentCityMovieInfo.push(this.allMovieInfo[i])
                        }
                    }
                })
            },
            getHotMovieInfo() {
                this.hotMovieInfo = []
                let len = this.allMovieInfo.length
                let arr = [];
                for (let i = 1; i <= len; i++) {
                    arr.push(i);
                }
                arr.sort(
                    function () {
                        return 0.5 - Math.random();
                    }
                );
                arr.length = 4;
                for (let i = 0; i < arr.length; i++) {
                    this.hotMovieInfo.push(this.allMovieInfo[arr[i]])
                }
            },
            checkMovieDetails(data) {
                sessionStorage.setItem("movieInfo", JSON.stringify(data))
                //去电影详情页
                this.$router.push({
                    name: 'movie_detail'
                })
            },
            getAllMovieInfoPc() {
                this.$axios.get('/api/tato/getAllMovieInfoPc'
                ).then((res) => {
                    this.allMovieInfo = []
                    for (let i = 0; i < res.data.length; i++) {
                        let item = {
                            schoolInfo: res.data[i].schoolInfo,
                            movieInfo: JSON.parse(res.data[i].movieInfo)
                        }
                        this.allMovieInfo.push(item)
                    }
                    sessionStorage.setItem("allMovieInfo", JSON.stringify(this.allMovieInfo))
                    this.getCurrentCityMovieInfo()
                    this.getHotMovieInfo()
                }).catch(function (error) {
                    console.log(error);
                });
            },
            goToAllMoviePage() {
                this.$router.push({
                    path: "/movie_type_page",
                    query: {
                        allMovieInfo: this.allMovieInfo
                    }
                })
            }
        },
        created() {
            let tempMovie = sessionStorage.getItem("allMovieInfo")
            if (tempMovie == null) {
                this.getAllMovieInfoPc()
            } else {
                this.allMovieInfo = JSON.parse(tempMovie)
                this.$nextTick(() => {
                    this.getCurrentCityMovieInfo()
                    this.getHotMovieInfo()
                })
            }
        },
        computed: {
            currentCityMovieSum: function () {
                return this.currentCityMovieInfo.length
            }
        }
    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .currentCityMovieImage {
    width: 20%;
    height: 200px;
  }

  .bottom {
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    height: 250px;
  }

</style>
